<template>
    <div class="view-wrap">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="地图名称">
                    <el-input v-model.trim="queryParams.name" placeholder="请输入地图名称" clearable />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="queryParams.date"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="view-content">
            <div class="operation-group">
                <el-button type="primary" @click="handleAddNew">新增</el-button>
            </div>
            <el-table :data="tableData" height="calc(100vh - 330px)" style="width: 100%">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="id" label="mapId"  />
                <el-table-column prop="width" label="地图尺寸">
                    <template #default="scope">{{scope.row.width}}x{{scope.row.height}}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="name" label="操作" width="200">
                    <template #default="scope">
                        <el-link @click="handleEdit(scope.row)" type="primary">编辑</el-link>
                        <el-link @click="handlePreview(scope.row)" type="success" style="margin: 0 10px;">预览</el-link>
                        <el-link @click="handleDelete(scope.row)" type="danger">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizes"
                    background
                    layout="sizes, total, prev, pager, next"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            
        </div>
       
    </div>
    <map-add :visible="mapAddVisible" @close="handleAddClose"></map-add>
</template>
  
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { usePagination } from '@/composable/common';
import { getMapList, deleteMap } from '@/api/map';
import mapAdd from './mapAdd.vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();

const queryParams = ref({
    name: '',
    date: null
})
const tableData = ref([]);
const {
    pageNo,
    pageSize,
    total,
    pageSizes,
    handleSizeChange,
    handleCurrentChange
} = usePagination(getTableList);
const mapAddVisible = ref(false);

onMounted(()=>{
    handleQuery();
})

function handleQuery(){
    pageNo.value = 1;
    getTableList();
}   

function getTableList(){
    console.log(pageNo.value,pageSize.value)
    const params = {
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        name: queryParams.value.name
    }
    getMapList(params).then(res=>{
        tableData.value = res.data.data;
        total.value = res.data.total;
    })
}

function handleAddNew(){
    mapAddVisible.value = true;
}

function handleEdit(data){
    router.push("/editor?id="+data.id);
}

function handlePreview(data){
    let routeData = router.resolve({
        name: `MapPreview`,
        params: { id: data.id}
      });
      console.log(routeData,'routeData')
      const page = window.open(routeData.href, "MapPreview",`scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`);
      page.name = 'MapPreview';
      //console.log(page?.location,'8989')
      page?.location.reload();
}

function handleAddClose(type){
    mapAddVisible.value = false;
    if(type=='add')handleQuery();
}

function handleDelete(row){
    ElMessageBox.confirm('确认删除此地图吗？','提示',{
        type: 'warning',
    }).then(()=>{
        deleteMap(row.id).then(res=>{
            handleQuery();
        })
    })
}

</script>

<style lang="scss" scoped>



</style>

